<script setup lang="ts">
import { computed } from "vue";
import checkedImg from "./images/checked.png";
type IselectorData = {
  id: string | number;
  label: string;
  remark?: string;
  disabled?: boolean;
};

interface PropsData {
  modelValue?: (string | number)[];
  columns?: string | number; //几列布局
  multiple?: boolean; // 是否多选
  selectorData?: IselectorData[]; //供选择的选项
  selectorTitle?: string; // 供选择组的标题
  name?: string; // 取值时的键值
  note?: string | number; //一句话注释
}

const propsData = withDefaults(defineProps<PropsData>(), {
  columns: 2, // 默认一行两个选项
  multiple: false, // 默认单选
  selectorData: () => [],
  modelValue: () => [],
});

const emits = defineEmits<{
  (
    e: "getSelectorValues",
    items: IselectorData,
    keyName: string,
    selectorType: string
  ): void;
  (e: "update:modelValue", val: (string | number)[]): void;
}>();

// 已选择的数据
const checkedDatas = computed(() => {
  return propsData.modelValue;
});

// 所有选项列表
const options = computed(() => {
  return propsData.selectorData;
});

// 根据布局获取相关样式
const getItemStyle = computed(() => {
  if (propsData.columns === 2) {
    return "item-2";
  }
  return "item-3";
});

// 获取选项的样式，是否已选中
const getCheckStyle = (item: IselectorData) => {
  if (propsData.modelValue.includes(item.id)) {
    return "item-checked";
  }
  return "";
};

// 该项是否被选中，即是否在已选数组里能找到
const isChecked = (item: IselectorData) => {
  if (propsData.modelValue.includes(item.id)) {
    return true;
  }
  return false;
};

// 获取选项的禁用样式，是否需要禁用
const getDisabledStyle = (item: IselectorData) => {
  if (item.disabled) {
    return "item-disabled";
  }
  return "";
};

// 选项的点击事件
function itemClick(data: IselectorData) {
  console.log(data);

  if (data.disabled) return;
  // 复制原数组
  let arr = [...checkedDatas.value];
  // 再点一次取消
  if (checkedDatas.value.includes(data.id)) {
    const i = checkedDatas.value.indexOf(data.id);
    arr.splice(i, 1);
  } else {
    if (propsData.multiple) {
      // 允许多选,传多个
      arr = [...propsData.modelValue, data.id];
    } else {
      arr = [data.id];
    }
  }
  emits("update:modelValue", arr);
}
</script>
<template>
  <div class="selector-box">
    <div class="title" v-if="propsData.selectorTitle">
      {{ propsData.selectorTitle }}
      <div class="tag">
        <span class="title-type title-type-left">
          {{ propsData.multiple ? "多选" : "单选" }}
        </span>
        <span class="title-type title-type-right">
          {{ propsData.note }}
        </span>
      </div>
    </div>
    <div :class="['item-con', getItemStyle]">
      <template v-for="(item, index) in options" :key="index">
        <div :class="['item-box', getCheckStyle(item), getDisabledStyle(item)]">
          <div class="item-event" @click="itemClick(item)">
            <div class="name">{{ item.label }}</div>
            <div class="remark">{{ item.remark }}</div>
          </div>
          <img v-if="isChecked(item)" :src="checkedImg" class="checked-img" />
        </div>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.selector-box {
  width: 100%;
  padding: 10px;
  background-color: #fff;
  .title {
    color: #333333;
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
  }
  .title-type {
    color: #999999;
    font-size: 14px;
    margin-left: 5px;
  }
  .tag {
    flex: 1;
  }

  .item-con {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .item-box {
      min-width: 36px;
      background-color: #f5f5f5;
      color: #333333;
      margin-bottom: 10px;
      border-radius: 4px;
      border: 1px solid #f5f5f5;
      display: flex;
      flex-direction: column;
      padding: 10px;
      align-items: center;
      justify-content: center;
    }
    .name {
      font-size: 14px;
      text-align: center;
    }
    .remark {
      margin-top: 5px;
      color: #999999;
      font-size: 12px;
      text-align: center;
    }
    .item-checked {
      background-color: #e7f1ff;
      color: #1677ff;
      position: relative;
      .checked-img {
        position: absolute;
        width: 28px;
        bottom: 0px;
        right: 0px;
      }
    }
  }
  // 两列
  .item-2 {
    .item-box {
      width: calc(50% - 5px);
      .item-event {
        width: 100%;
      }
      &:nth-child(2n) {
        margin-left: 10px;
      }
    }
  }
  .item-3 {
    .item-box {
      width: calc(33% - 6px);
      margin-left: 10px;
      .item-event {
        width: 100%;
      }
      &:nth-child(3n-2) {
        margin-left: 0px;
      }
    }
  }
  .item-disabled {
    opacity: 0.4;
  }
}
</style>
